<template>
  <view class="w-100">

    <view class="bg-f1 h-100vh">


      <view class="wrap">
        <!-- <uni-card is-full :is-shadow="false"> -->
        <!-- #ifndef APP-NVUE -->
        <!-- <text class="uni-h6"> 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局</text> -->
        <!-- #endif -->


        <view class="pt-f left-0 w-100 p-0-32 bg-white z1000" :style="'height: 140rpx;top:0'">
          <!-- <view> -->

            <!-- <u-icon name="checkmark-circle" color="" size="32" label="货架空位"></u-icon>
            <u-icon name="checkmark-circle-fill" color="blue" size="32" label="空箱"></u-icon>
            <u-icon name="checkmark-circle-fill" color="red" size="32" label="货物"></u-icon>
            <u-icon name="checkmark-circle-fill" color="orange" size="32" label="运输中"></u-icon> -->
          <!-- </view> -->
          <u-grid :col="3" :border="false" >
              <u-grid-item>
                <view style="width: 15px;height: 15px;">
                  <image class="w-100 h-100" src="../../static/staticKst/unselected.png"></image>
                </view>
                <view class="grid-text">空货位</view>
              </u-grid-item>
              <u-grid-item>
                <view style="width: 15px;height: 15px;">
                  <image class="w-100 h-100" src="../../static/staticKst/kx.png"></image>
                </view>
                <view class="grid-text">空箱</view>
              </u-grid-item>
              <u-grid-item>
                <view style="width: 15px;height: 15px;">
                  <image class="w-100 h-100" src="../../static/staticKst/bought.png"></image>
                </view>
                <view class="grid-text">箱货物</view>
              </u-grid-item>
              <u-grid-item>
                <view style="width: 15px;height: 15px;">
                  <image class="w-100 h-100" src="../../static/staticKst/selected.png"></image>
                </view>
                <view class="grid-text">空货位选中</view>
              </u-grid-item>
              <u-grid-item>
                <view style="width: 15px;height: 15px;">
                  <image class="w-100 h-100" src="../../static/staticKst/kxxz.png"></image>
                </view>
                <view class="grid-text">空箱选中</view>
              </u-grid-item>
              <u-grid-item>
                <view style="width: 15px;height: 15px;">
                  <image class="w-100 h-100" src="../../static/staticKst/rukuxuanzhong.png"></image>
                </view>
                <view class="grid-text">箱货物入库</view>
              </u-grid-item>

            </u-grid>
        </view>


        <!-- </uni-card> -->
        <movable-area :style="'height:' +
          (positionRow * 40 + 350) +
          'rpx;width: 100vw;top:' +
          rpxNum * 140 +
          'px'
          " class="pt-f left-0">
          <movable-view :style="'width: 100vw;height:' + (positionRow * 40 + 350) + 'rpx;'" :inertia="true" :scale="true"
            :scale-min="0.95" :scale-max="2" direction="all" @change="onMove" @scale="onScale">

            <view class="Stage dp-f jc-c ai-c fz-22 color-333">
              X号立体仓
            </view>

            <view v-for="(item, index) in positionList" :key="index" class="dp-f jc-c mt-20"
              :style="'width:' + boxWidth + 'px;height:' + positionSize + 'px'">

              <view v-for="(position, col) in item.ColumnNum" :key="col" class="dp-ib"
                :style="'width:' + positionSize + 'px;height:' + positionSize + 'px'"
                @click="handleChoosePosition(index, col, operationStatus)">
                <image v-if="position.Status === 0" class="w-100 h-100" src="../../static/staticKst/unselected.png"
                  mode="aspectFit"></image>
                <image v-else-if="position.Status === 1" class="w-100 h-100" src="../../static/staticKst/selected.png"
                  mode="aspectFit"></image>
                <image v-else-if="position.Status === 2" class="w-100 h-100" src="../../static/staticKst/bought.png"
                  mode="aspectFit"></image>
              </view>
            </view>
          </movable-view>
        </movable-area>
        <view class="pt-f bottom-bar left-0 dp-f fd-cr z1000">

          <view class="bg-white p-all-32">

            <view class="dp-f ai-c fw-w fz-28 color-333 mb-20">
              <text>已选</text>
              <view class="p-all-10 b-1 br-5 dp-f ai-c jc-c fz-28 ml-20" v-for="(optItem, optindex) in optArr"
                :key="optindex">
                {{ optItem.RowNum + '行' + optItem.ColumnNum + '列' }}
              </view>
            </view>
            <view class="operate-btn">

              <view class="dp-f jc-c ai-c br-10 fz-34 color-fff operate-btn-detail"
                :class="operationStatus == 1 ? 'bg-red-1' : 'bg-unbtn'" @click="hujiaokongxiang()">
                {{ operationStatus == 1 ? (' 确认呼叫空箱') : '呼叫空箱' }}
              </view>
              <view class="dp-f jc-c ai-c br-10 fz-34 color-fff operate-btn-detail"
                :class="operationStatus == 2 ? 'bg-red-1' : 'bg-unbtn'" @click="rongqilichang()">
                {{ operationStatus == 2 ? (' 确认容器离场') : '容器离场' }}
              </view>
              <view class="dp-f jc-c ai-c br-10 fz-34 color-fff operate-btn-detail"
                :class="operationStatus == 3 ? 'bg-red-1' : 'bg-unbtn'" @click="rongqiruchang()">
                {{ operationStatus == 3 ? (' 确认容器入场') : '容器入场' }}
              </view>
              <view class="dp-f jc-c ai-c br-10 fz-34 color-fff operate-btn-detail"
                :class="operationStatus == 4 ? 'bg-red-1' : 'bg-unbtn'" @click="ruku()">
                {{ operationStatus == 4 ? (' 确认入库') : '入库' }}
              </view>

            </view>

          </view>

        </view>
      </view>
    </view>


    <u-modal v-model="show" :content="content" title=" "></u-modal>

    <u-modal v-model="showRuKu" title="容器入场">
      <view class="slot-content">
        <u-input v-model="value" :type="type" :border="border" placeholder="请扫码" />
        <view class="slot-content-view">
          <view>仓位码:</view>
          <view>箱码:</view>
        </view>
      </view>
    </u-modal>

  </view>
</template>

<script>
import { positionData } from "./positionData.js";
export default {
  data() {
    return {
      boxWidth: 400, //屏幕宽度px
      positionRow: 0, //缓存仓库行数
      positionCol: 0, //缓存仓库列数
      SelectNum: 0, //选择货位数
      positionArray: [], //仓库货位的二维数组
      // 0为空货位(白色),1为空箱(绿色),2为有货(红色),3为运输中(橙色),一维行，二维列
      // -1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
      showTis: true, //显示选货位提示
      positionList: [],//接口获取的原始位置
      positionSize: 53, //座位尺寸
      operationStatus: 0,// 记录操作专题  默认是0，没有操作，1，呼叫空箱，2，容器离场，3.容器入场 4.入库 // 记录操作专题  默认是0，没有操作，1，呼叫空箱，2，容器离场，3.容器入场 4.入库
      optArr: [], //选中的仓位数组。
      show: false,
      content: '请先进行操作再选择货位',
      showRuKu: false,
      value: '',
      type: 'text',
      border: true,
      src: '/static/staticKst/logo.png',
    };
  },
  computed: {
    rpxNum() {
      return this.boxWidth / 750;
    },
    pxNum() {
      return 750 / this.boxWidth;
    },
  },
  onLoad() {
    //获取宽度
    uni.getSystemInfo({
      success: function (e) {
        this.boxWidth = e.screenWidth;
        //#ifdef H5
        this.scaleMin = 0.95;
        //#endif
      },
    });
    // 获取当前屏幕宽度

    this.initData();
  },
  methods: {
    initData: function () {
      //初始化数据，根据仓库的行列数，初始化仓库货位的二维数组
      let arr = positionData;
      //假数据说明：PositonCode仓位编号，RowNum-行号，ColumnNum-纵号，Status-状态
      //Status 0-空闲(白色) 1-空箱(绿色) 2-有货(红色) 3-运输中(橙色)
      // 遍历positionData数组，重组数组，把RowNum做成一个key值
      let positionList = [];
      arr.forEach((item) => {
        let index = positionList.findIndex((v) => v.RowNum === item.RowNum);
        if (index === -1) {
          positionList.push({
            RowNum: item.RowNum,
            ColumnNum: [
              {
                PositonCode: item.PositonCode,
                Status: item.Status,
                RowNum: item.RowNum,
                ColumnNum: item.ColumnNum,
              },
            ],
          });
        } else {
          positionList[index].ColumnNum.push({
            PositonCode: item.PositonCode,
            Status: item.Status,
            RowNum: item.RowNum,
            ColumnNum: item.ColumnNum,
          });
        }
        // 同时找到最大得行数和列数
        if (item.RowNum > this.positionRow) {
          this.positionRow = item.RowNum
        }
        if (item.ColumnNum > this.positionCol) {
          this.positionCol = item.ColumnNum
        }


      });
      this.positionList = positionList

      //根据屏幕得宽度，计算每个仓位得尺寸，使每一行得仓位军营分布再每一行
      this.positionSize = (this.boxWidth - 40) / this.positionCol


      console.log(positionList, this.positionSize, 'this.positionSize', this.positionCol, this.boxWidth);

    },


    //处理座位选择逻辑
    handleChoosePosition: function (row, col, operationStatus) {
      console.log("选择座位", row, col, operationStatus)
      if (this.operationStatus === 0) {
        this.show = true
        return
      }
      let positionValue = this.positionList[row]["ColumnNum"][col].Status
      console.log("positionValue", positionValue)
      let newArray = this.positionList;
      // //如果是已购座位，直接返回
      if (positionValue === 2 || positionValue === -1) return
      // //如果是已选座位点击后变未选
      if (positionValue === 1) {
        newArray[row]["ColumnNum"][col].Status = 0
        this.getOptArr(newArray[row]["ColumnNum"][col], 0)
        this.SelectNum--
        // this.getOptArr(newArray[row][col], 0)
      } else if (positionValue === 0) {
        newArray[row]["ColumnNum"][col].Status = 1
        this.SelectNum++
        this.getOptArr(newArray[row]["ColumnNum"][col], 1)
      }
      // //必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
      // this.seatArray = newArray.slice();
      //如果 this.operationStatus = 2;容器离场
      if (this.operationStatus === 2) {
        console.log('容器离场')
        this.operationStatus = 0;
      }

    },

    getOptArr: function (item, status) {
      if (status === 0) {
        this.optArr = this.optArr.filter((v) => v.PositonCode !== item.PositonCode)
      } else {
        this.optArr.push(item)
      }

    },
    //放大缩小事件
    onScale: function (e) {
      this.showTis = false;
      // this.moveX=-e.detail.x
      let w = this.boxWidth * 0.5;
      let s = 1 - e.detail.scale;
      this.moveX = w * s;
      this.scale = e.detail.scale;
      if (s > 0 || s === 0) {
        this.showTis = true;
      }
    },
    //移动事件
    onMove: function (e) {
      this.showTis = false;
      this.moveX = e.detail.x;
    },
    // 呼叫空箱
    hujiaokongxiang: function () {
      console.log(this.operationStatus, 'operationStatus')
      // 呼叫空箱
      if (this.operationStatus === 0) {
        this.operationStatus = 1;


        //确认呼叫空箱	
      } else if (this.operationStatus === 1) {
        this.operationStatus = 0;
      }
    },
    rongqiruchang: function () {
      this.operationStatus = 2;
    },
    // 
    rongqilichang: function () {
      this.operationStatus = 2;
    },
  },
};
</script>

<style lang="scss" scoped>
// u-grid 不能超过父元素得高度
.u-grid-item{
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  font-size: 24rpx;
}
.slot-content {
  padding: 32rpx;

  .slot-content-view {
    margin-top: 20rpx;
    line-height: 60rpx;
  }

}
.grid-text{
    font-size : 24rpx;
  }
.operate-btn {
  width: 686rpx;
  display: flex;
  justify-content: space-between;
  //分成2列
  flex-wrap: wrap;

  //换行
  .operate-btn-detail {
    width: 340rpx;
    height: 90rpx;
    margin-bottom: 10rpx;
  }
}

.p-all-10 {
  padding: 10rpx;
}

.ml-10 {
  margin-left: 10rpx;
}

.m-0-10 {
  margin: 0 10rpx;
}

.bg-unbtn {
  background-color: #f9abb3;
}

.bg-red-1 {
  background-color: #F45664;
}

.br-10 {
  border-radius: 10rpx;
}

.ml-20 {
  margin-left: 20rpx;
}

.mb-20 {
  margin-bottom: 20rpx;
}

.p-all-32 {
  padding: 32rpx;
}

.fd-cr {
  flex-direction: column-reverse;
  /* 主轴方向从下到上,默认从左到右 */
}

.bottom-bar {
  bottom: var(--window-bottom);
}

.color-fff {
  color: #fff
}

.br-15 {
  border-radius: 15rpx;
}

.over-h {
  overflow: hidden;
}

.dp-ib {
  display: inline-block;
}

.mt-20 {
  margin-top: 20rpx;
}

.pa-v-2 {
  /* 定位垂直对齐 */
  left: 50%;
  transform: translateX(-50%)
}

.b-d-1 {
  border: 1px dashed #e5e5e5;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.bg-f1 {
  background-color: #f1f1f1;
}

.h-100vh {
  // height: 100vh;
}

.pt-f {
  position: fixed;
}

.left-0 {
  left: 0;
}

.p-0-32 {
  padding: 0 32rpx;
}

.pt-20 {
  padding-top: 20rpx;
}

.bg-white {
  background-color: #fff;
}

.z1000 {
  z-index: 1000;
}

.fz-34 {
  font-size: 34rpx;
}

.fw-b {
  font-weight: bold;
}

.mt-10 {
  margin-top: 10rpx;
}

.fz-28 {
  font-size: 28rpx;
}

.color-666 {
  color: #666666
}

.dp-f {
  display: flex;
}

.jc-c {
  justify-content: center;
}

.ai-c {
  align-items: center;
}

.fz-22 {
  font-size: 22rpx;
}

.color-333 {
  color: #333333
}

.m-0-a {
  margin: 0 auto;
}

.mt-48 {
  margin-top: 48rpx;
}

.fz-20 {
  font-size: 20rpx;
}

.color-999 {
  color: #999999
}

.b-1 {
  border: 1px solid #CCCCCC;
}

.br-5 {
  border-radius: 5rpx;
}

.Stage {
  background-color: #dddddd;
  width: 380rpx;
  height: 34rpx;
  transform: perspective(34rpx) rotateX(-10deg);
  margin: 0 auto;
}

.bg-line {
  background-color: rgba(0, 0, 0, 0.3);
}</style>

